<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';

	const author = reactive({
		name: '王昭君',
		books: [
			'Vue 2 - Advanced Guide',
			'Vue 3 - Basic Guide',
			'Vue 4 - The Mystery'
		]
	})

	const publishedBooksMessage = computed(() => {
		return author.books.length > 0 ? 'Yes' : 'No'
	})

	const firstName = ref('John')
	const lastName = ref('Doe')
	const fullName = computed({
		get() {
			return firstName.value + " " + lastName.value
		},
		set(newValue) {
			// 注意：我们这里使用的是解构赋值语法
			[firstName.value, lastName.value] = newValue.split(" ")
		}
	})

	function refreshName() {
		fullName.value = 'liu bei'
	}

	const count = ref(2)

	const alwaysSmall = computed({
		get(previous) {
			if (count.value <= 3) {
				return count.value
			}
			return previous
		},
		set(newValue) {
			count.value = newValue * 2
		}
	})
	
	function refreshCount(){
		count.value = 5
	}
</script>

<template>
	<p>Has published books:</p>
	<span>{{ publishedBooksMessage }}</span>
	<p>
		<button @click="refreshName">刷新名称</button>
		<span>{{fullName}}</span>
	</p>
	<p>
		<span>{{alwaysSmall}}</span>
		<button @click="refreshCount">刷新数字</button>
	</p>

</template>



<style>
</style>